<template>
  <div class="wrap">
    <div class="wrap-table">
      <!-- <BaseTitle title="用户列表" /> -->
      <a-table
        :loading="loading"
        :dataSource="props.data"
        :columns="columns"
        size="small"
        :pagination="{ pageSize: 4 }"
      >
        <template #title>
          <div style="padding: 0 8px 8px 8px">已加购产品</div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'productName'">
            <a-tag color="#f50" v-if="record.afloatStatus === 1">途</a-tag>
            {{ record.productName }}
          </template>
          <template v-if="column.key === 'operation'">
            <a-button class="button-interval" type="link" size="small" @click="openEdit(record)">
              修改数量
            </a-button>
            <a-button
              class="button-interval"
              type="link"
              size="small"
              @click="emit('cancelProduct', record)"
            >
              取消
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="open" title="修改采购数量" @ok="handleOk">
      <a-row style="padding: 24px">
        <a-col :span="6">购买数量：</a-col>
        <a-col :span="18"
          ><a-input-number
            id="inputNumber"
            v-model:value="quantity"
            @change="changeQuantity(quantity, storeNum)"
        /></a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineProps } from 'vue'
  import { ProductSimpleVO } from '/@/api/product/model/productModel'
  import { Modal } from 'ant-design-vue'
  const props = defineProps({
    data: {
      type: Array,
      required: true,
    },
  })

  const emit = defineEmits(['cancelProduct'])

  const loading = ref(false)
  const open = ref(false)
  const quantity = ref(0)
  const storeNum = ref(0)
  const quantityStatus = ref('')
  const currentProduct = ref<ProductSimpleVO>()

  const columns = [
    {
      title: '产品名称',
      dataIndex: 'productName',
      key: 'productName',
      align: 'center',
    },
    {
      title: '有效期',
      dataIndex: 'limitTime',
      key: 'limitTime',
      align: 'center',
      width: 160,
    },
    {
      title: '购买数量',
      dataIndex: 'quantity',
      key: 'quantity',
      align: 'center',
      width: 160,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: 180,
    },
  ]

  const openEdit = (record) => {
    open.value = true
    currentProduct.value = record
    quantity.value = record.quantity
    storeNum.value = record.storeNum
  }
  const handleOk = () => {
    if (quantity.value == null) {
      Modal.error({
        title: '输入采购数量有误',
        content: '请填写采购数量！',
      })
      return
    }
    currentProduct.value!.quantity = quantity.value
    currentProduct.value = undefined
    open.value = false
  }
  const changeQuantity = (a, b) => {
    console.log('a', a)
    console.log('b', b)
    if (a != null) {
      if (a > b) {
        Modal.error({
          title: '输入采购数量有误',
          content: '采购数量超过库存数量，已自动设置为当前库存数量',
        })
        quantity.value = b
      } else if (a < 1) {
        Modal.error({
          title: '输入采购数量有误',
          content: '采购数量不可小于1，已自动设置为1',
        })
        quantity.value = 1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrap {
    margin: 0;
    padding: 0;
    &-table {
    }
  }

  :deep(.ant-table-title) {
    padding: 0px 8px 8px 8px !important;
  }
</style>
